デバイスに合わせてCSSを振り分ける「Media Queries」

Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。
今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。

• Media Queries

Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができるようになります。

Media Queriesの記述方法

Media Queriesは、外部CSSの読み込みと、インラインの指定が可能です。
外部CSSに対してMedia Queriesを指定することでファイル単位の管理が可能になります。インラインに記述する場合は部分的にCSSを振り分けたい場合に便利です。

インライン記述サンプル

@media screen and (min-width: 0px) and (max-device-width: 320px) {
...
}
@media screen and (min-width: 321px) and (max-device-width: 920px) {
...
}
@media screen and (min-width: 911px)  {
...
}

外部CSS記述サンプル

<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 910px)" >
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 911px)" >

Media Queriesの振り分けに使う属性

Media Queriesの振り分け条件に利用できる主な属性には以下のようなものがあります。

• Max Width：
  ビューエリアの最大幅。このサイズより小さい場合に適用
• Min Width：
  ビューエリアの最小幅。このサイズより大きい場合に適用
• Max Device Width：
  デバイスサイズの最大幅。このサイズより小さい場合に適用
• Min Device Width：
  デバイスサイズの最小幅。このサイズより大きい場合に適用
• Device Pixel Ratio：
  デバイスの解像度（webkit）
• Orientation：
  デバイスの向き

Max Width

Max Widthはビューエリアの最大幅を表します。このサイズより小さい場合にスタイルが適用されます。

値：整数値

インライン指定サンプル

@media screen and (max-width: 320px) {
	div {
		width: 200px;
	}
}

Min Width

Min Widthはビューエリアの最小幅を表します。このサイズより大きい場合にスタイルが適用されます。

値：整数値

インライン指定サンプル

@media screen and (max-width: 320px) {
	div {
		width: 400px;
	}
}

Max Device Width

Max Device Widthはデバイスサイズの最大幅を表します。このサイズより小さい場合にスタイルが適用されます。

値：整数値

インライン指定サンプル

@media screen and (max-device-width: 320px) {
	div {
		width: 200px;
	}
}

Min Device Width

Min Device Widthはデバイスサイズの最小幅を表します。このサイズより大きい場合にスタイルが適用されます。

値：整数値

インライン指定サンプル

@media screen and (min-device-width: 320px) {
	div {
		width: 400px;
	}
}

Device Pixel Retio

Device Pixel Ratioは、デバイスの解像度に合わせスタイルを適用します。

値：整数値

インライン指定サンプル

@media screen and (-webkit-device-pixel-ratio:2) {
	div {
		width: 400px;
	}
}

Orientation

Orientationはデバイスの向きによってスタイルを適用します。

値：文字列（portrait or landscape）

インライン指定サンプル

@media screen and (orientation: portrait) {
	div {
		width: 400px;
	}
}

@media screen and (orientation: landscape) {
	div {
		width: 400px;
	}
}

Viewportの指定

Media Queriesを正しく機能させるにはViewportの指定が必要です。
Viewportは最初に読み込まれたときの画面サイズや、ピンチイン/アウトの制御、拡大率の指定をすることができます。

Viewport指定は、画面サイズを特定のサイズに限定するとおかしなことになってしまうので、デバイスに合わせてサイズを指定するようにします。ある程度汎用的に利用できるサンプルはこちら。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

IEの対応

Media Queriesは、CSS3の機能であり、古いIE6～8には対応していません。そこでこのライブラリを利用します。

• jQuery Media Query Plugin

IE9以下で利用する場合はIE Conditional Commentsを利用すると便利です。

サンプル

iPhone 3G/3GSとiPhone 4 portrait + landscape

@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
/* iPhone 3G/3GS CSS */
}
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
/* iPhone 4 CSS */
}

iPad portrait + landscape

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad CSS */
}

スマートフォン、タブレット端末、PCどのWebサイト、Webアプリケーションを作るにも必ず利用することになりそうな仕様です。必ず理解しておかないといけないですね。

この記事は「Media Queries」の転載です。